<template>
  <!-- 公共头 -->
  <header id="header">
    <section class="container">
      <h1 id="logo">
        <a href="#/" title="兔年区块链">
          <img src="../assets/img/logo.png" width="80%" height="80%" alt="兔年区块链">
        </a>
      </h1>
      <div>
        <ul class="nav">
          <router-link to="/" tag="li" active-class="current" exact>
            <a>购买课程</a>
          </router-link>
          <router-link to="/orders" tag="li" active-class="current">
            <a>我的订单</a>
          </router-link>
        </ul>
      </div>

      <!--用户名-->
      <div style="position: absolute;left:85%; top: 55px">
        <el-dropdown>
          <h2 class="el-dropdown-link" style="color: #4aa3ff">
            {{ inputName }}
          </h2>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item>
              <router-link to="/login" tag="li" active-class="current">
                {{ inputName==='未登录'?"登录/注册":"退出登录" }}
              </router-link></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="clear"></div>
    </section>
  </header>
</template>

<script>
export default {
  // 接受父组件的值
  props: {
    inputName: String,
  },
  methods: {
  }
}
</script>
